﻿@using System.Web.Optimization
@section scripts {
    @Scripts.Render("~/js/bundles/index.js")

    <script type="text/javascript" src="~/foundation/js/foundation/foundation.js"></script>
    <script type="text/javascript" src="~/foundation/js/foundation/foundation.forms.js"></script>
    <script type="text/javascript" src="~/foundation/js/foundation/foundation.topbar.js"></script>

    <link type="text/css" rel="stylesheet" href="~/css/app.css" />
    <link type="text/css" rel="stylesheet" href="~/css/style.css" />
    <link type="text/css" rel="stylesheet" href="~/css/azureonline.css" />
}
@Html.Partial("Menu")
<div class="layout">
    <div class="sidebar">
        <div class="full-height" data-bind="visible: screen() == 'tables'">
            <div class="full-height" data-bind="with: tablesView.tablesView">
                @Html.Partial("Tables/TablesNav")
            </div>
        </div>
        <div class="full-height" data-bind="visible: screen() == 'blobs'">
            <div class="full-height" data-bind="with: blobsView.blobContainersView">
                @Html.Partial("Blobs/BlobContainersNav")
            </div>
        </div>
        <div class="full-height" data-bind="visible: screen() == 'queues'">
            <div class="full-height" data-bind="with: queuesView.queuesListView">
                @Html.Partial("Queues/QueuesNav")
            </div>
        </div>
        <div class="full-height" data-bind="visible: screen() == 'console'">
            <div class="full-height" data-bind="with: consoleView">
                @Html.Partial("Console/RequestsNav")
            </div>
        </div>
    </div>
    <div class="content">
        <div class="row collapse full-height">
            <div class="large-12 columns full-height">
                <div class="full-height" data-bind="visible: screen() == 'tables'">
                    <div class="full-height" data-bind="with: tablesView">
                        @Html.Partial("Tables/TablesContent")
                    </div>
                </div>
                <div class="full-height" data-bind="visible: screen() == 'blobs'">
                    <div class="full-height" data-bind="with: blobsView">
                        @Html.Partial("Blobs/BlobsContent")
                    </div>
                </div>
                <div class="full-height" data-bind="visible: screen() == 'queues'">
                    <div class="full-height" data-bind="with: queuesView">
                        @Html.Partial("Queues/QueuesContent")
                    </div>
                </div>
                <div class="full-height long-content" data-bind="visible: screen() == 'console'">
                    <div class="full-height" data-bind="with: consoleView">
                        @Html.Partial("Console/ConsoleContent")
                    </div>
                </div>
                <div class="full-height" data-bind="visible: screen() == 'accounts'">
                    @Html.Partial("Accounts/Main")
                </div>
                <div class="full-height long-content" data-bind="visible: screen() == 'main'">
                    @Html.Partial("About")
                </div>
                <div class="full-height long-content" data-bind="visible: screen() == 'docs'">
                    @Html.Partial("Docs/Docs")
                </div>
            </div>
        </div>
    </div>
</div>
@Html.Partial("Console/ConsolePanel")
<script type="text/javascript">
    $(document).ready(function () {
        var context = new AzureOnlineDataContext();
        var spaRuntime = context.spaRuntime;
        spaRuntime.addOnExecute(function (ev, route, args, phash) {
            for (var key in args) {
                var val = args[key];
                val = utils.getHashCode(val);
                args[key] = val;
            }
            var newHash = route.formatHash(args); //   /#console 
            var page = location.pathname + location.search + newHash;
            ga('send', 'pageview', { page: page });
        });

        var model = new AzureOnlineViewModel(context);
        ko.applyBindings(model);

        spaRuntime.check();

        function checkAccounts() {
            if (model.context.accounts.accounts().length == 0) {
                model.accountsView.details.forNew();
                ko.bindingHandlers.modalOpen.show('createAccount');
            }
        }

        checkAccounts();

        (function () {
            if (!model.termsOfUse.accepted()) {
                var $dlg = $('#termsOfUse');
                $dlg.reveal2().open({
                    animation: 'fade',
                    closeOnBackgroundClick: false,
                    closeOnEscapeKey: false
                });
            }
        })();
    });

    $(document).foundation();
</script>
@section modals {
    <div data-bind="with: tablesView.tablesView.details">
        @Html.Partial("Tables/CreateTable")
    </div>
    <div data-bind="with: tablesView.deleteDetails">
        @Html.Partial("Tables/DeleteTable")
    </div>
    <div data-bind="with: tablesView.recordView">
        @Html.Partial("Tables/TableRecordDetails")
    </div>
    <div data-bind="with: tablesView.deleteRecordDetails">
        @Html.Partial("Tables/DeleteTableRecord")
    </div>
    <div data-bind="with: tablesView.queryBuilder">
        @Html.Partial("Tables/QueryBuilder")
    </div>
    <div data-bind="with: tablesView.tableSettingsDetails">
        @Html.Partial("Tables/TableSettings")
    </div>
    <div data-bind="with: blobsView.blobContainersView.details">
        @Html.Partial("Blobs/CreateContainer")
    </div>
    <div data-bind="with: blobsView.blobsView.details">
        @Html.Partial("Blobs/CreateBlob")
    </div>
    <div data-bind="with: blobsView.deleteBlobDetails">
        @Html.Partial("Blobs/DeleteBlob")
    </div>
    <!-- ko with: blobsView.blobDetails -->
    @Html.Partial("Blobs/BlobDetails")
    <!-- /ko -->
    <!-- ko with: blobsView.containerDetails -->
    @Html.Partial("Blobs/ContainerDetails")
    <!-- /ko -->
    <!-- ko with: blobsView.deleteContainerDetails -->
    @Html.Partial("Blobs/DeleteContainer")
    <!-- /ko -->
    <div data-bind="with: blobsView.leaseDetails">
        @Html.Partial("Blobs/Lease")
    </div>
    <div data-bind="with: queuesView.queuesListView.details">
        @Html.Partial("Queues/CreateQueue")
    </div>
    <div data-bind="with: queuesView.deleteDetails">
        @Html.Partial("Queues/DeleteQueue")
    </div>
    <div data-bind="with: queuesView.queueMessagesListView.details">
        @Html.Partial("Queues/CreateMessage")
    </div>
    <div data-bind="with: queuesView.queueDetails">
        @Html.Partial("Queues/QueueDetails")
    </div>

    <div data-bind="with: queuesView.queueMessagesListView.deleteDetails">
        @Html.Partial("Queues/DeleteMessage")
    </div>
    <div data-bind="with: queuesView.queueMessagesListView.deleteAllDetails">
        @Html.Partial("Queues/DeleteAllMessages")
    </div>
    <div data-bind="with: servicePropertiesView">
        @Html.Partial("Service/ServiceProperties")
    </div>

    <!-- ko with: accountsView.details -->
    @Html.Partial("Accounts/AccountDetails")
    <!-- /ko -->
    <!-- ko with: accountsView.deleteDetails -->
    @Html.Partial("Accounts/DeleteAccount")
    <!-- /ko -->
    <!-- ko with: termsOfUse -->
    @Html.Partial("Docs/TermsOfUseModal")
    <!-- /ko -->

}

